/*
  @each <variable> in <expression> {...}
*/

$font-sizes: 18, 16, 14, 12;

// 基本
@each $size in $font-sizes {
  .text-#{$size} {
    font-size: #{$size}px;
    line-height: $size + 2 + px;
  }
}


// 映射：可以通过写作 @each <variable>, <variable> in <expression> {...} 遍历映射中的每个键/值对。

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $key, $value in $icons {
  .icon-#{$key} {
    display: inline-block;
    font-family: "Icon Font";
    content: $value;
  }
}


// 解构：@each <variable...> in <expression> {...} 
$icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;

@each $name, $glyph, $size in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
    font-size: $size;
  }
}